<extend name="Public/base"/>
<block name="head">
	<link href="__MOBILE__/css/topic.css" rel="stylesheet">
</block>
<block name="body">
<div class="container" >
    <div class="row">
        <div class="col-xs-12 topic">
            <volist name="_list" id="data">
                    <div class="topic-box">
                        <a href="{:U('/topic/'.$data['id'])}">
	                        <div class="img">
	                        	<img class="lazy img-responsive" alt="{$data.title}" src="{$data.pic_url|get_image_url}">
	                        </div>
	                        <div class="info">
	                        	 <h4 >
		                        	{$data.title}
		                        </h4>
                            	<h5 class="subtitle">{$data['subtitle']}</h5>
	                        </div>
	                       
                        </a>                
                    </div>
             </volist>
        </div>
        
    </div>
    <notempty name="_page">
    	 <div class="row">
	        	<div class="col-sm-12 ">
					<button id="next" class="btn" p="2" total-page="{$total_page}">
						点击加载更多
					</button>
				</div>
	      </div>
</notempty>
</div>

</block>
<block name="script">
<script>
	$(function(){
		$('.topic-box').each(function(){
			a = $('.topic-box').innerWidth()/2*1.1;
			b = $('.topic-box').innerWidth()/2*0.95;			
			$(this).innerHeight(Math.round(a)-1);				
		});
		  
		  $('#next').click(function(){
		  	LoadPage();  
		  }); 
	});
	 
	function LoadPage(){
		var id="{$cate['id']}";
		var currentPage = $('#next').attr('p') ? $('#next').attr('p') : 1;
		$.get("{:U('Topic/index')}",{'p':currentPage},function(result){
			if(result.errno==0){
				$('.topic').append(result.content);
				$('#next').attr('p',result.p);
				if(result.p>=$('#next').attr('total-page')){
					$('#next').html('木有了，亲');
					$('#next').attr('disabled',true);
					$('#next').addClass('disabled');
				}
			}
			
		},'json');	
	}
	</script>
</block>

